<!--
 * @Description: 新增/收藏应用卡片
 * @Author: Huang Junjie
 * @Date: 2021-06-04 09:31:47
 * @LastEditTime: 2021-10-20 15:27:16
 * @LastEditors: Liu Zhiwang
-->
<template>
  <div>
    <base-dialog
      class="application-center-dialog"
      :visible.sync="dialog.visible"
      title="应用中心"
      :loading="dialog.loading">
      <div class="top">
        应用中心
        <span class="el-icon el-icon-close" @click="dialog.visible = false;$emit('close')" />
      </div>
      <div class="content v-flex-elastic h-flex">
        <div class="app">
          <div v-for="(app, appi) in appList" :key="appi" class="app-list">
            <template v-if="app.appList.length">
              <div class="title">
                <span class="name"><i />{{ app.platformName }}</span>
              </div>
              <div class="system-box">
                <div
                  v-for="(item, index) in app.appList"
                  :key="index"
                  class="system-item"
                  :class="{'choose':chooseApp.id == item.id}"
                  @click="chooseSys(item)"
                  @dblclick="openTo(app.ipAddress,item)">
                  <p><img :src="item.url" alt=""></p>
                  <div class="show-line-2">{{ item.appName }}</div>
                  <div v-if="item.isCollection == 1" class="collection-on"><i class="el-icon-star-on" /></div>
                </div>
              </div>
            </template>
          </div>
        </div>
        <div element-loading-background="rgba(18, 40, 84, 0.8)" class="workbench-menu v-flex">
          <div class="title">
            <span class="name">功能列表</span>
            <div v-if="chooseApp.isCollection == 1" class="collection collection-on" @click="handleCancleCollectionApp"><i class="el-icon-star-on" />已收藏</div>
            <div v-else class="collection collection-off" @click="handleCollectionApp"><i class="el-icon-star-off" />收藏</div>
          </div>
          <!-- <el-input v-model="dialog.filterTreeText" placeholder="输入关键字进行过滤" /> -->
          <div class="workbench-menu-tree v-flex-elastic">
            <el-scrollbar>
              <el-tree
                ref="menuTree"
                :data="menuList"
                :props="treeProps"
                default-expand-all
                :expand-on-click-node="false"
                :filter-node-method="filterNode">
                <span :slot-scope="{ node, data }" class="custom-tree-node">
                  <span class="el-tree-node__label">{{ node.label }}</span>
                  <!-- <span>
                    <i v-if="data.isCollection == 1" class="el-icon-star-on" @click="handleCollection(node, data)" />
                    <i v-else class="el-icon-star-off" @click="handleCollection(node, data)" />
                    <i v-if="data.isCollection == 1" class="el-icon-star-on collection-on" />
                  </span> -->
                </span>
              </el-tree>
            </el-scrollbar>
          </div>
        </div>
      </div>
    </base-dialog>
  </div>
</template>
<script>
import { isExternal } from '@/utils/validate'
import { findAppCollectionOrNot, updateWorkBenchApp, deleteByAppId, getListTreeByAppId as getMenuList } from '@/api/jjxt/workBench'

export default {
  props: {

  },
  data() {
    return {
      menuList: [],
      dialog: {
        visible: true,
        loading: false,
        filterTreeText: ''
      },
      treeProps: {
        disabled: data => {
          return !!data.children.length || (data && !data.status)
        },
        label: 'menuName'
      },
      appList: [],
      chooseApp: { id: '' }
    }
  },
  watch: {
    'dialog.filterTreeText'(val) {
      this.$refs.menuTree.filter(val)
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    // 初始化应用和子系统
    init() {
      findAppCollectionOrNot({ platformCode: 'AQSC' }).then(response => {
        this.appList = response.data
        this.appList.forEach((key) => {
          key.appList.forEach((e) => {
            // if (e.menuIcon) {
            //   this.$set(e, 'url', require('@/assets/app-icon/' + e.menuIcon + '.png'))
            // } else {
            //   // this.$set(e, 'url', '')
            // }
            e.menuIcon = '接触网作业系统'
            this.$set(e, 'url', require('@/assets/images/jjxt/app-icon/接触网作业系统.png'))
            if (!this.chooseApp.id) this.chooseApp = e
          })
        })
        this.$nextTick(() => {
          this.getMenuList()
        })
      })
    },
    // 打开新系统
    openTo(ip, item) {
      console.log(ip + item.redirectUri)
      if (ip && item.redirectUri) {
        window.open(ip + item.redirectUri)
      }
    },
    // 选择子系统
    chooseSys(item) {
      if (this.chooseApp.id === item.id) return
      if (this.chooseApp.menuIcon) {
        this.chooseApp.url = require('@/assets/images/jjxt/app-icon/' + this.chooseApp.menuIcon + '.png')
      }
      this.$nextTick(() => {
        this.chooseApp = item
        if (item.menuIcon) item.url = require('@/assets/images/jjxt/app-icon/' + item.menuIcon + '-1.png')
        this.getMenuList()
      })
    },
    // 查询菜单
    getMenuList() {
      getMenuList({ appId: this.chooseApp.id }).then(response => {
        this.menuList = response.data
      })
    },
    handleCancleCollectionApp() {
      this.confirmBox('确定取消在个人工作台区域显示？')
        .then(() => {
          deleteByAppId(this.chooseApp.id).then(response => {
            this.notifiySuccess('已取消收藏到个人工作台！')
            this.$emit('renew')
            this.chooseApp.isCollection = 0
          })
        })
        .catch(() => {
          this.chooseApp.isCollection = 1
        })
    },
    handleCollectionApp() {
      var param = {
        'appAttr': {
          'appCode': this.chooseApp.appCode
        }
      }
      updateWorkBenchApp(param)
        .then(response => {
          this.notifiySuccess('已成功收藏到个人工作台！')
          this.$emit('renew')
          this.chooseApp.isCollection = 1
        })
        .catch(() => {
          this.chooseApp.isCollection = 0
        })
    },
    // 添加删除工作台
    handleCollection(node, data) {
      const menuPath = []
      this.isStop = false
      this.getMenuPath(data, this.menuList, menuPath)
      const path = require('path')
      if (!data.isCollection) {
        data.isCollection = 1
        var param = {
          menuAttr: { menuId: data.id, menuName: data.menuName },
          type: 1,
          url: isExternal(data.menuPathAttrList[0].menuPath) ? data.menuPathAttrList[0].menuPath : menuPath.reduce((result, item) => {
            return item.menuPathAttrList[0].menuPath ? path.join(result, item.menuPathAttrList[0].menuPath ? item.menuPathAttrList[0].menuPath : '') : ''
          }, '')
        }
        updateWorkBenchApp(param)
          .then(response => {
            this.notifiySuccess('已成功收藏到个人工作台！')
            this.$emit('renew')
          })
          .catch(() => {
            data.isCollection = 0
          })
      } else {
        data.isCollection = 0
        this.confirmBox('确定取消在个人工作台区域显示？')
          .then(() => {
            deleteByAppId(data.id).then(response => {
              this.notifiySuccess('已取消收藏到个人工作台！')
              this.$emit('renew')
            })
          })
          .catch(() => {
            data.isCollection = 1
          })
      }
    },
    // 选择菜单
    chooseMenu(data, node) {
      if (node.disabled) return
      const menuPath = []
      this.isStop = false
      this.getMenuPath(data, this.menuList, menuPath)

      const path = require('path')
      this.dialog.form = Object.assign({}, this.dialog.form, {
        content: data.menuName,
        url: isExternal(data.menuPath) ? data.menuPath : menuPath.reduce((result, item) => {
          return item ? path.join(result, item ? item.menuPath : '') : ''
        }, ''),
        menuAttr: data
      })
      const url = isExternal(this.dialog.form.url) || this.dialog.form.url.startsWith('/') ? this.dialog.form.url : '/' + this.dialog.form.url
      window.open(url)
    },
    // 获取url
    getMenuPath(menu, data, path) {
      for (let i = 0; i < data.length; i++) {
        if (this.isStop) break
        if (menu.id === data[i].id) {
          path.push(data[i])
          this.isStop = true
          break
        } else if (data[i].children.length) {
          path.push(data[i])
          this.getMenuPath(menu, data[i].children, path)
        }
      }
      if (!this.isStop) path.pop()
    },
    // 过滤菜单
    filterNode(value, data) {
      if (!value) return true
      return data.menuName.indexOf(value) !== -1
    }
  }
}
</script>
<style lang="scss">
  .application-center-dialog{
    .el-dialog{
      width: 1000px !important;
      height: 70%;
      .el-dialog__body{
        height: 100%;
        padding: 0;
        max-height: 100%;
        display: flex;
        flex-direction: column;
        .top{
          height: 40px;
          line-height: 38px;
          text-align: center;
          background-color: #112854;
          border-top: 2px solid #51A4E6;
          color: #51A4E6;
          font-size: 18px;
          font-weight: bold;
          .el-icon{
            float: right;
            color: white;
            font-size: 20px;
            font-weight: bold;
            margin-top: 8px;
            margin-right: 12px;
            cursor: pointer;
          }
        }
        .content{
          flex: 1;
          overflow: hidden;
          .title{
            font-size: 16px;
            color: #000;
            margin-bottom: 16px;
            font-weight: bold;
            border-bottom: 1px solid #DFDDDE;
            .name{
              border-bottom: 2px solid;
              display: inline-block;
              line-height: 32px;
              height: 32px;
              i{
                display: inline-block;
                width: 6px;
                height: 6px;
                background-color: #112854;
                transform: rotate(45deg);
                position: relative;
                top: -4px;
                margin-right: 6px;
              }
            }
          }
          .app{
            padding: 0px 20px;
            width: 600px;
            overflow: auto;
            margin: 20px 0;
            &::-webkit-scrollbar-track {
              background-color: #DDDEE0;
            }
            &::-webkit-scrollbar-thumb{
              border-right: 0px solid #fff;
              border-left: 0px solid #fff;
            }
            .system-box{
              display: flex;
              flex-wrap: wrap;
              .system-item{
                position: relative;
                height: 100px;
                width: 25%;
                padding: 6px 10px;
                text-align: center;
                cursor: pointer;
                p{
                  margin-bottom: 8px;
                  img{
                    width: 50px;
                    height: 50px;
                  }
                }
                &.choose{
                  color: #51A4E6;
                }
                .collection-on {
                  position: absolute;
                  right: 38px;
                  top: -4px;
                  width: 18px;
                  height: 18px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background: #f99117;
                  border-radius: 50%;
                  border: 1px solid #ffffff;
                  i {
                  display: inline-block;
                  color: #ffffff;
                  font-size: 10px;
                  }
                }
              }
            }
            .show-line-2{
              text-overflow: -o-ellipsis-lastline;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              line-clamp: 2;
              -webkit-box-orient: vertical;
            }
          }
          .workbench-menu{
            background-color: #F4F5F7;
            flex: 1;
            padding: 20px;
            .title {
              display: flex;
              justify-content: space-between;
              align-items: center;
              .collection {
                cursor: pointer;
                width: 80px;
                height: 22px;
                line-height: 22px;
                display: flex;
                justify-content: center;
                align-items: center;
                text-align: center;
                font-weight: normal;
                font-family: '宋体';
                font-size: 12px;
                color: #808c94;
                background: #e4f4fe;
                border: 1px solid #b1b8be;
                border-radius: 22px;
                i {
                  display: inline-block;
                  margin-right: 8px;
                  color: #b1b8be;
                  font-size: 15px;
                }
              }
              .collection-on {
                color: #f99117;
                background: #fef3e5;
                border: 1px solid #f99117;
                i {
                  color: #f99117;
                }
              }
            }
            .workbench-menu-tree{
              padding-right: 20px;
              overflow: auto;
              &::-webkit-scrollbar-track {
                background-color: #DDDEE0;
              }
              &::-webkit-scrollbar-thumb{
                border-right: 0px solid #fff;
                border-left: 0px solid #fff;
              }
              .el-tree-node[aria-disabled=true]>.el-tree-node__content{
                // cursor: no-drop;
              }
              .el-tree-node__label{
                color: #333333;
              }
              .el-tree-node__label::before{
                content: "";
                width: 6px;
                height: 6px;
                background-color: #333333;
                display: inline-block;
                margin-right: 8px;
                position: relative;
                top: -3px;
              }
              .el-icon-caret-right:before{
                content: "";
              }
              .el-tree-node:focus>.el-tree-node__content{
                background: #59B4FA !important;
              }
              .el-tree-node:hover>.el-tree-node__content{
                background: #59B4FA !important;
                .el-tree-node__label{
                  color: #ffffff !important;
                }
                .el-tree-node__label::before{
                  background-color: #ffffff;
                }
                .el-icon-star-off {
                  color: #ffffff;
                }
                .el-icon-star-on {
                  color: #ffffff;
                }
              }
              .is-current>.el-tree-node__content{
                background: #59B4FA !important;
                .el-tree-node__label{
                  color: #ffffff !important;
                }
                .el-icon-star-off {
                  color: #ffffff;
                }
                .el-icon-star-on {
                  color: #ffffff;
                }
                .el-tree-node__label::before{
                  background-color: #ffffff !important;
                }
              }
              .custom-tree-node {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-right: 10px;
                &:hover .el-icon-star-off {
                  display: block;
                }
                &:hover .el-icon-star-on {
                  display: block;
                }
                .el-icon-star-off {
                  display: none;
                  font-size: 20px;
                }
                .el-icon-star-on {
                  display: none;
                  font-size: 20px;
                }
                &:hover .collection-on {
                  display: none;
                }
                .collection-on {
                  display: block;
                  color: #59B4FA;
                }
              }
            }
            .el-input{
              margin-bottom: 16px;
            }
          }
        }
      }
      .el-dialog__header,
      .el-dialog__footer{
        display: none;
      }
    }

  }
</style>
